<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动元素之父元素高度自适应2-伪元素</title>
  <style>
    /* 伪元素一个冒号两个冒号都可以 */
    div::first-letter {
      font-size: 30px;
      color: red;
    }

    /* 设置头一个字母 */
    div::first-line {
      /* font-size: 30px; */
      background: yellow;
    }

    /* 设置第一行 */
    div::before {
      content: "aaaaaa";
    }

    /* 添加前面的文本 */
    div::after {
      content: "bbb";

    }

    /* 添加最后的文本 */
  </style>

</head>

<body>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quo magnam, accusantium id impedit non delectus
    animi eum dolore! Voluptatem repellendus labore ea illo delectus dolore fuga culpa quidem consequuntur.</div>
</body>

</html>